<!--  -->
<template>
  <div class="cart">
    <tips></tips>
    <van-checkbox-group v-model="result"
                        :disabled="isStepShow?true:false">

      <van-checkbox :name="item.id"
                    v-for="item in cartList"
                    :key="item.id"
                    @click="changeChecked(item)">
        <van-swipe-cell>
          <van-card :num="item.number"
                    :price="item.retail_price"
                    :title="item.goods_name"
                    :thumb="item.list_pic_url" />
          <van-stepper v-model="item.number"
                       v-show="isStepShow"
                       @change="stepChange(item)" />

          <template #right>
            <van-button square
                        text="删除"
                        type="danger"
                        class="delete-button"
                        @click="deleteGoods(item.product_id)" />
          </template>
        </van-swipe-cell>
      </van-checkbox>

    </van-checkbox-group>

    <van-submit-bar :price="
                     cartTotal.goodsAmount*100"
                    button-text="提交订单"
                    @submit="onSubmit">
      <van-checkbox v-model="allChecked">全选</van-checkbox>
      <template #tip>
        累计共<span>{{cartTotal.checkedGoodsCount}}</span>件商品，可点击<van-button :type="isStepShow?'info':'primary'"
                    size="small"
                    @click="changeStepShow">{{isStepShow?'完成编辑':'编辑'}}</van-button>进行修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import Tips from "@/components/Tips.vue"
import { getCartListData, getCartChecked, getCartStep, deleteCartGood } from "@/request/api.js"
export default {
  data () {
    return {
      //是一个展示选中元素的数组
      //如果被选中的checked为1就放进result里面
      result: [],
      //全部勾选
      //allChecked: true,
      //-------------购物车列表数据---------------
      cartList: [],
      //商品总信息
      cartTotal: [],
      //步进器是否显示
      isStepShow: false
    }
  },
  components: {
    Tips
  },
  computed: {
    allChecked: {
      /* 
   什么时候全部勾选？
   1.方法一：判断勾选的result数组长度 和cartList数组长度是否相等？
   2.方法二：通过后端的数据判断是否相等
   
   */

      get () {
        return this.result.length == this.cartList.length;
      },
      set (val) {//即将要修改成的新值
        console.log("---set---", val);
        if (this.isStepShow) {
          //如果isStepShow为真，就不发送改变选择请求
          return false;
        }
        //处理id数组
        let all_arr = [];
        this.cartList.map(item => {
          return all_arr.push(item.product_id);
        })
        getCartChecked({
          isChecked: val ? 1 : 0,
          productIds: all_arr.join(),
        }).then(res => {
          if (res.errno == 0) {
            console.log(res.data);
            this.cartRender(res.data);
          }
        }).catch(err => {
          console.log(err);
        })
      }
    }
  },
  methods: {
    onClickEditAddress () {

    },
    onSubmit () {

    },
    cartRender (data) {
      /* 
      购物车渲染：封装重复利用
      */
      this.cartList = data.cartList;
      this.cartTotal = data.cartTotal;
      /* 
      如果被选中的checked为1就把商品id放进result里面
      */
      //在每次判断result数组是否选中时，清空result数组，为了组数不会越来越长
      this.result = [];
      this.cartList.map(item => {
        item.checked == 1 ? this.result.push(item.id) : '';
      })
    },
    changeChecked (item) {
      /* 
      这个请求是告诉后端我们修改了哪些数据，并且后端返回修改后的完整数据
      */
      if (this.isStepShow) {
        //如果isStepShow为真，就不发送改变选择请求
        return false;
      }
      getCartChecked({
        isChecked: item.checked == 0 ? 1 : 0,
        productIds: item.product_id,
      }).then(res => {
        if (res.errno == 0) {
          console.log(res.data);
          this.cartRender(res.data);
        }
      }).catch(err => {
        console.log(err);
      })
    },
    changeStepShow () {
      return this.isStepShow = !this.isStepShow;
    },
    stepChange (item) {
      getCartStep({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id
      }).then(res => {
        if (res.errno == 0) {
          console.log(res);
          this.cartRender(res.data);
        }
      }).catch(err => {
        console.log(err);
      })
    },
    deleteGoods (productId) {
      deleteCartGood({
        productIds: productId.toString()
      }).then(res => {
        if (res.errno == 0) {
          console.log(res.data);
          this.$toast.success("商品删除成功");
          setTimeout(() => {
            this.$router.go(0)
          }, 1000);
        }
      }).catch(err => {
        console.log(err);
      })
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {
    getCartListData().then(res => {
      if (res.errno == 0) {
        console.log(res.data);

        this.cartRender(res.data);
      }
    }).catch(err => {
      console.log(err);
    })
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style lang="less" scoped>
.cart {
  .van-checkbox-group {
    background-color: #fff;
    padding-bottom: 150px;
    .van-checkbox {
      padding: 10px 15px;
      border: 1px solid #ccc;
      .van-stepper {
        float: right;
      }
    }
    /deep/.van-checkbox__label {
      flex: 1;
    }
  }
  .van-submit-bar {
    bottom: 50px;
    border: 1px solid #ccc;
  }
  .van-button--square {
    height: 100%;
  }
}
</style>